<template>
  <!-- 首页头部 -->

  <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
    
    <el-menu-item index="1">
      <!-- 头像 -->
      <img src="@/assets/image/cy.jpg" style="width: 50px;border-radius: 20px;margin-right: 20px;" />
      <!-- 输入框 -->
      <el-input v-model="search" @keydown.enter="onSearch()" style="width: 300px" size="large" placeholder="搜索"
        :prefix-icon="Search"/>
    </el-menu-item>

    <div class="flex-grow" />
    
    <el-sub-menu index="2" >
      <template #title>用户名:{{ userStore.userName }}</template>
      <el-menu-item  @click="$router.push({name:'user'})">个人中心</el-menu-item>
      <el-menu-item  @click="drawer = true">设置</el-menu-item>
      <el-menu-item  @click="$router.push({name:'change'})">修改密码</el-menu-item>
      <el-menu-item  @click="dialogVisible=!dialogVisible">退出登录</el-menu-item>
    </el-sub-menu>
  </el-menu>


<!-- 设置弹出框 -->
<el-drawer v-model="drawer" title="设置" :with-header="true" size="40%">
    <span>设置页面</span>
  </el-drawer>
<!-- 退出登录确定框 -->
<el-dialog
    v-model="dialogVisible"
    title="退出提示"
    width="300px"
    :before-close="handleClose"
  >
    <span>确定退出登录?</span>
    <template #footer>
      <div class="dialog-footer">
       <el-button class="el_button" @click="on_login()">确定退出</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { Search } from '@element-plus/icons-vue'//导入搜索图标
import { openInfo } from '../utils/common'; //消息弹窗
import useUserStore from '../stores/useUserStore';
import useMusicStore from '../stores/useMusicStore';
import { ElMessageBox } from 'element-plus'
const search = ref("")
const router = useRouter()
const musicStore = useMusicStore()
const userStore = useUserStore()

//搜索
function onSearch(){
  musicStore.search = search.value
}


//退出登录
function on_login(){
  dialogVisible.value = false
  openInfo('','退出登陆成功')
  router.push({name:'login'});
}

//设置页面弹窗
const drawer = ref(false)

//确定登录退出
const dialogVisible = ref(false)

//关闭确认退出登录框
function handleClose(){
  dialogVisible.value = false
   
}
</script>

<style>
.flex-grow {
  flex-grow: 1;
  /*向右飘*/
}

.el-button{
    border-radius: 10px;
    background: transparent;
    color: rgb(23, 110, 101);
    border: 1px rgb(26, 158, 90) solid;
}
.el_button:hover{
  background-color: rgb(44, 207, 191);
  color: red;
}
</style>